<template>
    <div class="content">
        <div class="box">
            <el-dropdown class="margins">
                <el-button>
                    矿业权<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                    <el-dropdown-item>矿点</el-dropdown-item>
                    <el-dropdown-item>矿权范围</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

            <el-button class="margins">地震动参数</el-button>
            <el-button class="margins" style="margin-left: 0;">历史地震</el-button>
            <el-dropdown class="margins">
                <el-button>
                    显示图幅编号<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                    <el-dropdown-item>1:20万</el-dropdown-item>
                    <el-dropdown-item>1:5万</el-dropdown-item>
                    <el-dropdown-item>1:1万</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-dropdown @command="useUtilities" class="margins">
                <el-button>
                    实用工具<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item disabled>测量</el-dropdown-item>
                        <el-dropdown-item command="distance">距离</el-dropdown-item>
                        <el-dropdown-item command="area">面积</el-dropdown-item>
                        <el-dropdown-item divided disabled>标绘</el-dropdown-item>
                        <el-dropdown-item command="point">点</el-dropdown-item>
                        <el-dropdown-item command="linestring">线</el-dropdown-item>
                        <el-dropdown-item command="polygon">多边形</el-dropdown-item>
                        <el-dropdown-item command="rectangle">矩形</el-dropdown-item>
                        <el-dropdown-item command="circle">圆形</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-dropdown @command="changeMapBasemap" class="margins">
                <el-button>
                    地图切换<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="images">影像图层</el-dropdown-item>
                        <el-dropdown-item command="electron">电子图层</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-button class="margins" style="margin-left: 0;">地质图</el-button>

            <el-button @click="changeMiningArea">切换显示矿区图层</el-button>
        </div>
        <div>
            <el-input style="width: 240px" class="margins" placeholder="请输入" />
            <el-button @click="pointSearch" class="margins" style="margin-left: 0;">选点查询</el-button>
            <el-dropdown @command="polygonSearch" class="margins">
                <el-button>
                    区划查询<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="polygon">多边形</el-dropdown-item>
                        <el-dropdown-item command="rectangle">矩形</el-dropdown-item>
                        <el-dropdown-item command="circle">圆形</el-dropdown-item>
                        <el-dropdown-item command="freehand">快速多边形</el-dropdown-item>
                        <el-dropdown-item command="angled-rectangle">倾斜矩形</el-dropdown-item>
                        <el-dropdown-item command="sensor">雷达梯形</el-dropdown-item>
                        <el-dropdown-item command="sector">扇形</el-dropdown-item>
                        
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-dropdown @command="changeMapBasemap" class="margins">
                <el-button>
                    矿权类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="images">全部矿权</el-dropdown-item>
                        <el-dropdown-item command="images">探矿权</el-dropdown-item>
                        <el-dropdown-item command="images">采矿权</el-dropdown-item>
                        <el-dropdown-item command="electron">国家规划</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-dropdown @command="changeMapBasemap" class="margins">
                <el-button>
                    矿种类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="images">全部矿种</el-dropdown-item>
                        <el-dropdown-item command="electron">煤矿</el-dropdown-item>
                        <el-dropdown-item command="electron">金矿</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

            <el-button @click="mapFlyToPosition">飞行到指定点</el-button>
        </div>
    </div>
</template>

<script setup>
import { nextTick, onMounted, ref, defineExpose } from 'vue';
import { getCurrentInstance } from 'vue';
const { appContext } = getCurrentInstance();
const emitter = appContext.config.globalProperties.$emitter;
// 切换显示矿区图层
// miningArea-layer-symbol 矿区面图层
// miningArea-layer-fill 矿区文字标注图层
function changeMiningArea() {
  // 兄弟组件 发送事件
  emitter.emit('changeMapLevel', ['miningArea-layer-symbol', 'miningArea-layer-fill']);
}

function mapFlyToPosition(){
  // 兄弟组件 发送事件
  emitter.emit('changeMapFlyTo', {});
}

// 切换地图-底图图层
function changeMapBasemap(val){
    if(val == 'images'){ //影像图层
        emitter.emit('changeMapLevel', ['gaodeImage-tiles', 'gaodeImageAnnotation-tiles']);
    }else if(val == 'electron'){ // 电子图层
        emitter.emit('changeMapLevel', ['gaodeElectron-tiles']);
    }
}


// 实用工具
const paintingType = ref('') //tool 工具  search 查询
const toolType = ref('')
function useUtilities(val){
    paintingType.value = 'tool'
    let goPainting = ''
    if(val == 'distance'){  //测量
        toolType.value = 'measure'
        goPainting = 'linestring'
    }else if(val == 'area'){  //测量
        toolType.value = 'measure'
        goPainting = 'polygon'
    }else{ //新增
        toolType.value = 'add' 
        goPainting = val
    }
    nextTick(() => {
        emitter.emit('changePaintingTools', {mode: goPainting, count: (val == 'distance' || val == 'area')});
    })
}

// 点查询
function pointSearch(){
    paintingType.value = 'search'
    emitter.emit('changePaintingTools', {mode: 'point'});
}

// 面查询
function polygonSearch(val){
    paintingType.value = 'search'
    emitter.emit('changePaintingTools', {mode: val});
}

onMounted(() => {
    // 监听 绘画完成
    emitter.on('paintingCompleted', (feature) => {
        console.log('绘画的实体:', '绘画类型：' + paintingType.value, '工具类型：' + toolType.value, feature);
    })
})


</script>


<style scoped>
.content{
    padding: 10px 0;
}
.box{
    margin-bottom: 10px;
}
.margins{
    margin-right: 10px;
}
</style>